<template>
  <div id="panel" layout="row">
    <div flex="nogrow" class="chose">
      <slot name="chose"></slot>
    </div>
    <div flex="nogrow" class="panel_box_img" @click="goDetail">
      <img :src="addPath(value.image)" alt="" v-if="value.image && [0,9,10].indexOf(Number(orderType)) > -1">
      <img :src="ORDERTYPE_1" alt="" v-else-if="orderType == 1">
      <img :src="ORDERTYPE_3" alt="" v-else-if="orderType == 3">
      <img :src="ORDERTYPE_6" alt="" v-else-if="orderType == 6">
      <img :src="ORDERTYPE_7" alt="" v-else-if="orderType == 7">
      <img :src="ORDERTYPE_8" alt="" v-else-if="orderType == 8">
      <img :src="ORDERTYPE_13" alt="" v-else-if="orderType == 13">
      <img :src="defaultImg" alt="" v-else>
    </div>
    <div flex layout="column" class="panel_box_bd" @click="goDetail">
      <div flex>
        <h4 class="sm_f panel_h4" v-if="value.fullName !== undefined">
          {{value.fullName}}
        </h4>
        <h4 class="sm_f panel_h4" v-else>
          {{value.name}}
        </h4>
        <slot name="service" v-if="service"></slot>
      </div>
      <div flex="nogrow" style="padding-top:7px;">
        <slot name="desc"></slot>
      </div>
      <div flex="nogrow" style="padding-top:7px;">
        <slot name="check"></slot>
      </div>
      <div flex layout="row" layout-align="center center" class="discrbition">
        <div flex="grow">
          <slot name="price"></slot>
        </div>
        <div flex="noshrink">
          <slot name="number"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//vfac image
import vfacDefaultAvatar from "assets/default_user_icon.png";
//vfhz image
import vfhzDefaultAvatar from "assets/flagImg.png";

// 特殊订单类型展示的图片 3-一键救援 6-预约置换 7-贷款购车 8-试乘试驾
import ORDERTYPE_1 from "assets/order_type_1.png";
import ORDERTYPE_3 from "assets/order_type_3.png";
import ORDERTYPE_6 from "assets/order_type_6.png";
import ORDERTYPE_7 from "assets/order_type_7.png";
import ORDERTYPE_8 from "assets/order_type_8.png";
import ORDERTYPE_13 from "assets/order_type_13.png";
// import mi
export default {
  name: "panel",
  data() {
    return {
      ORDER_ITEM_NAMES: {
        "1": "会员卡充值",
        "3": "一键救援",
        "6": "预约置换",
        "7": "贷款购车",
        "8": "试乘试驾",
        "13": "通讯卡充值"
      },
      defaultImg: vfacDefaultAvatar,
      ORDERTYPE_1,
      ORDERTYPE_3,
      ORDERTYPE_6,
      ORDERTYPE_7,
      ORDERTYPE_8,
      ORDERTYPE_13
    };
  },
  created() {
    //显示不同默认图
    if (this.$.appname === "cn.carowl.vfuhuizhong") {
      this.defaultImg = vfhzDefaultAvatar;
    }
    // 由于声明周期问题，propValue不一定有值，改为computed方式来获取propValue，此处进行注释
    //  let currentUrl = this.$router.history.current.name;
    //  console.log(this.value)
    //      if(currentUrl=="sg_goodsList"){
    //         //修改后台编辑商品名称属性，但是这个组件在爱车频道也使用了，所以进行判断
    //        this.propValue = this.value.fullName
    //      }else{
    //        this.propValue = this.value.name //商品列表
    //      }
  },
  computed: {
    propValue() {
      let currentUrl = this.$router.history.current.name;
      if (currentUrl == "sg_goodsList") {
        return this.value.fullName; //爱车频道标题
      } else if (["1", "3", "6", "7", "8", "13"].indexOf(this.orderType) > -1) {
        return this.ORDER_ITEM_NAMES[this.orderType];
      } else {
        return this.value.name;
      }
    }
  },
  methods: {
    goDetail() {
      if (!this.link) {
        return true;
      }
      if (this.isValid) {
        return;
      }
      if (this.value.categoryType === "1") {
        this.$router.push({
          name: "sg_goods",
          params: { id: this.value.id, name: "1" }
        });
      } else {
        this.$router.push({
          name: "sg_goods_car",
          params: { id: this.value.id, name: "1" }
        });
      }
    }
  },

  props: {
    value: {
      type: Object,
      default() {
        return {
          name: ""
        };
      }
    },
    link: Boolean,
    service: {
      type: Boolean,
      default() {
        return false;
      }
    },
    isValid: {
      //判断是否失效
      type: Boolean,
      default() {
        return false;
      }
    },
    orderType: {
      type: [Number, String],
      default() {
        return 0;
      }
    }
  }
};
</script>

<style>
#panel {
  background-color: #fff;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  max-height: 110px;
}

#panel .chose {
  align-self: center;
  padding-left: 2px;
}

#panel .mu-checkbox {
  position: relative;
  left: 4px;
}

#panel img {
  width: 100%;
  position: relative;
  /*margin-top: 50%;*/
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle;
}

#panel .panel_box_img {
  width: 80px;
  height: 80px;
  margin-left: 15px;
  text-align: center;
  overflow: hidden;
}

#panel .panel_box_bd {
  padding-left: 3%;
}

#panel:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #bdbdbd;
  color: #bdbdbd;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

#panel i {
  font-size: 25px !important;
}

#panel .panel_h4 {
  line-height: 1.2em;
  height: 2.4em;
  overflow: hidden;
  position: relative;
  font-weight: normal;
  color: black;

  /*display: -webkit-box !important;
    width: 100%;
    overflow : hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: black;
    font-weight: 500;
    line-height: 1.2;*/
}
</style>
